<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="参数管理"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
    <!-- 比较弹窗 -->
    <pdlog v-model="showLog" width="418px" title="比较" @comfirm="handleccc" @cencel="showLog = false">
      <div class="edit-dialog flex-c">
        <div class="name">已选模板</div>
        <div>Default-MySQL-5.7</div>
      </div>
      <div class="edit-dialog flex-c">
        <div class="name">比较模板</div>
        <el-select size="small" v-model="logValue" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      
    </pdlog>
    <!-- 应用弹窗 -->
    <pdlog v-model="showEdit" width="528px" title="应用" @comfirm="showEdit = false" @cencel="showEdit = false">
      <div class="edit-dialog flex-c">
        <div class="name">参数模板</div>
        <div>Default-MySQL-5.7</div>
      </div>
      <div class="edit-dialog">
        <div class="name">应用实例</div>
        <plist style="width:100%;" ref="pList" size="mini" :hasSelect="true" :tableData="tableData2" :tableColumn="tableColumn2" :hasIndex="false" >
        </plist>
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getConCluster} from '@/api/pageList'

  export default {
    data() {
      return {
        tableData2:[
            {aaa:'rds-e916',bbb:'9cc0d34404b9cc0d34404b',},
            {aaa:'rds-e916',bbb:'9cc0d34404b9cc0d34404b',},
            {aaa:'rds-e916',bbb:'9cc0d34404b9cc0d34404b',},
          ],
          tableColumn2:[{
              field: "aaa",
              label: "实例名称",
            },{
              field: "bbb",
              label: "实例ID",
            }],
        addBtnList:[],
        btnList:[],
        options: [
          {label:'模块名称1',value:'模块名称1'},
          {label:'模块名称2',value:'模块名称2'},
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        editValue: null, // 编辑值
        showEdit: false, // 编辑弹窗
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "cluster_type",
            label: "ID",
          },
          {
            field: "cluster_version",
            label: "数据库引擎版本",
            sortable: true

          },
          {
            field: "ava_node",
            label: "描述",
            sortable: true
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            btnlist: [{
                name: '比较',
                handle: this.handleLog
              },
              {
                name: '应用',
                handle: this.handleEdit
              },
            ]
          },
        ],
        tableData: [],
      }
    },
    components: {
      listPage
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        console.log('~~~~~~~~~',params)
        // 请求
        getConCluster().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })
      },
      handleAdd() {
        console.log('跳转新增页');
        // this.$router.push({
        //   path: '/physical/physicalMachineAdd'
        // })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
        this.$router.push({path:'/passsucserver/paramsManageDetail'})
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    // align-items: center;
    .name {
      min-width: 80px;
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
    }
    .el-input {
      width: 233px;
    }
  }
</style>
